import React, { useCallback, useEffect, useMemo } from 'react'
import VCard from '../../../components/VCard'
import { Form, Spin, message } from 'antd'
import { getRefuelList } from './service'
import SearchForm from '../../../components/SearchForm'
import { ExportToExcel } from '../../../utils/export'
import { title } from 'process'

interface VehicleRefuelRecordType {
  status: string
  count: number
}
export default function VehicleRefuelRecord() {
  const [form] = Form.useForm()
  // const PieOption = () => {
  //   return {
  //   title: {
  //     text: '驾驶员状态一览',

  //     left: 'center'
  //   },
  //   tooltip: {
  //     trigger: 'item'
  //   },
  //   legend: {
  //     orient: 'vertical',
  //     left: 'left'
  //   },
  //   series: [
  //     {
  //       bottom: 'bottom',
  //       right: 'right',
  //       name: 'name',
  //       type: 'pie',
  //       radius: '50%',
  //       data:
  //         driverStatus.map(item => {
  //           return {
  //             value: item.count,
  //             name: item.status
  //           }
  //         })
  //       ,
  //       emphasis: {
  //         itemStyle: {
  //           shadowBlur: 10,
  //           shadowOffsetX: 0,
  //           shadowColor: 'rgba(0, 0, 0, 0.5)'
  //         }
  //       }
  //     }
  //   ]
  // }}
  const [useInfo, setUseInfo] = React.useState<any[]>([])
  const [filterData, setFilterData] = React.useState<any[] | null>(null)
  const [loading, setLoading] = React.useState(false)

  const columns = [
    {
      title: '加油编号',
      dataIndex: 'refuel_id'
    },
    {
      title: '车牌号',
      dataIndex: 'vehicle_id',
      search: true
    },
    {
      title: '卡号',
      dataIndex: 'card_id'
    },

    {
      title: '加油金额',
      dataIndex: 'refuel_amount'
    },
    {
      title: '加油日期',
      dataIndex: 'refuel_date',
      ellipsis: true
    },
    {
      title: '发票',
      dataIndex: 'bill',
      render: (url: string) => {
        return (
          <img style={{width:"50px",height:"50px"}} src={url}></img>
        )
    }
  }
  ]

  const queryList = async () => {
    setLoading(true)
    await getRefuelList().then(res => {
      setUseInfo(res.data.data)
    })

    setLoading(false)
  }
  useEffect(() => {
    queryList()
  }, [])
  return (
    <div className="page-content-container">
      <div className="page-title-container">
        <div className="page-title">加油记录</div>
      </div>
      <div className="page-content">
        {/* <VTable></VTable> */}
        {/* <VCard type="card"></VCard> */}
        <Spin spinning={loading}>
          <SearchForm
            form={form}
            exportToExcel={() => {
              ExportToExcel('/api/refuel/export', '加油记录.xlsx')
            }}
            params={[{ type: 'date', name: 'date', label: '时间' }]}
            onFinsh={() => {
              // 根据起始时间筛选数据
              const values = form.getFieldsValue()
              const params: { start_time?: string; end_time?: string } = {}
              if (values.date) {
                params.start_time = values.date[0].format('YYYY-MM-DD')
                params.end_time = values.date[1].format('YYYY-MM-DD')
                const filteredData = useInfo.filter(item => {
                  const startDate = params.start_time as string
                  const endDate = params.end_time as string
                  const refuel_date = item.refuel_date;
                  console.log(refuel_date,startDate,refuel_date,endDate);
                  return refuel_date >= startDate && refuel_date <= endDate;
                })
                setFilterData(filteredData)
              } else {
                setFilterData(null)
              }
              console.log(values, params)
              // await ...
            }}
          />
          <div className="VCard-list">
            <VCard title={'加油记录'} type={'table'} columns={columns} dataSource={filterData || useInfo}></VCard>
          </div>
        </Spin>
      </div>
    </div>
  )
}
